<template>
	<div  style="width: 100%;height: 98vh; display: flex;flex-direction: row;align-items: center;justify-content: center; ">
		<div ><img  src="../pic/beijing.jpg" style="position: fixed; top: 0;left: 0;object-fit: cover;z-index: -1;" /></div>
		<div @click.stop style="z-index: 100;display: flex;flex-direction: row;">
      <div @click.stop>
        <el-autocomplete style="width: 18.25rem;" class="inline-input" v-model="fileName" :fetch-suggestions="querySearch" placeholder="请输入内容"
			 @select="handleSelect" ></el-autocomplete>
      </div>
      <div style="width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;">
        <el-button style="width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;" @click="returnBtn">
          <img style="width: 30px;height: 30px;" src="../pic/goon1.png" />
        </el-button>
      </div>
		</div>

		<!-- 弹框 -->
		<el-dialog   width="800px" :visible.sync="dialogTableVisible">
		  <div>
		    <div style="width: 95%;display: flex;flex-direction: row;height: 280px;">
		      <div style="margin-left: 40px;height: 100%;width: 30%;">
		        <img style="width: 100%; height: 320px;" :src="movieSrc.imgSrc" />
		      </div>
		      <!-- 介绍内容 -->
		      <div style="margin-left: 20px;height: 300px;display: flex;flex-direction: column;margin-top: 20px;">
		        <div style="font-size: 28px;color: rgba(250, 106, 7, 1);">{{movieSrc.title}} </div>
		        <div style="display: flex;flex-direction: row; margin-top: 10px;font-size: 20px;">
		          <div v-for="(src,index) in movieSrc.range">
		            <div style="color: #000000;margin-right: 10px;">{{movieSrc.range[index]}}</div>
		          </div>
		        </div>
		        <div style="color: #000000; display: flex;flex-direction: row; margin-top: 10px;font-size: 20px;">
		          {{movieSrc.direction}} / {{movieSrc.length}}分钟
		        </div>
		        <div style="color: #000000; display: flex;flex-direction: row; margin-top: 10px;font-size: 20px;">
		          {{movieSrc.time}} 中国大陆上映
		        </div>

		        <div style="margin-top: 15px; display: flex;flex-direction: row;">
		          <div style="display: flex;flex-direction: column;">
		            <div style="font-size: 28px;color: rgb(50, 147, 200);">累计票房</div>
		            <div style="display: flex;flex-direction: row;">
		              <div style="font-size: 28px;color: rgba(193, 1, 1, 1);margin-left: 15px;">{{movieSrc.allBoxoffice}}</div>
		              <div style="font-size: 20px;color: rgb(50, 147, 200);margin-top: 5px;margin-left: 3px;">万</div>
		            </div>
		          </div>

		          <div style="display: flex;flex-direction: column; margin-left: 20px;">
		            <div style="font-size: 28px;color: rgb(50, 147, 200);">猫眼口碑</div>
		            <div style="font-size: 28px;color: rgba(193, 1, 1, 1);margin-left: 36px;">{{movieSrc.praise}}</div>
		          </div>

		          <div style="display: flex;flex-direction: column;margin-left: 23px;">
		            <div style="margin-top: 14px;">
		              <el-rate v-model="movieSrc.score" disabled show-score text-color="#ff9900">
		              </el-rate>
		            </div>
		            <div style="margin-top: 7px;font-size: 16px;">{{movieSrc.personNum}}人参与评分</div>
		          </div>
		        </div>

		      </div>
		    </div>

		    <div style="width: 100%;height: 325rem; display: flex;flex-direction: column;border: 1px solid rgb(187, 187, 187); border-radius: 4px;background-color: rgba(245, 245, 245, 0.45);">
		      <!-- 剧情简介 -->
		      <div class='dialog_IandT' style="margin-top: 60px;">
		        <div class="dialog_Img1">
		          <img class="dialog_Img2" src="../pic/homePage/fa-film.svg" />
		        </div>
		        <div class="dialog_Text">剧情简介</div>
		      </div>
		      <div style="width: 90%; margin-top: 10px; margin-left: 20px;font-size: 20px;color: rgba(16, 16, 16, 0.85);">
		        {{movieSrc.introduction}}
		      </div>
		      <!-- 演员介绍 -->
		      <div class='dialog_IandT'>
		        <div class="dialog_Img1">
		          <img class="dialog_Img2" src="../pic/homePage/actor.png" />
		        </div>
		        <div class="dialog_Text">演职人员</div>
		      </div>
		      <!-- 演员图片 -->
		      <div style="width: 90%; margin-top: 10px; margin-left: 20px;display: flex;flex-direction: row;">
		        <div style="width: 160px;height: 210px; display: flex;flex-direction: column;" v-for="(src, index) in movieSrc.actorSrc"
		          :key="index">
		          <div style="width:100% ;height:70% ;display: flex;justify-content: center;align-items: center;">
		            <img style="width: 80%;height: 100%;" :src="movieSrc.actorSrc[index].imgSrc" />
		          </div>
		          <div style="margin-top: 5px; font-size: 20px;color: #000000; display: flex;justify-content: center;align-items: center;">{{movieSrc.actorSrc[index].name}}</div>
		          <div style="margin-top: 5px;font-size: 16px; display: flex;justify-content: center;align-items: center;">{{movieSrc.actorSrc[index].roleName}}</div>
		        </div>
		        <div style="width: 50px;height: 160px;display: flex;justify-content: center;align-items: center;">
		          <img src="../pic/homePage/fa5-ellipsis-h.svg" />
		        </div>

		      </div>

		      <!-- 票房排行 -->
		      <div class='dialog_IandT'>
		        <div class="dialog_Img1">
		          <img class="dialog_Img2" src="../pic/homePage/antOutline-line-chart@1x.png" />
		        </div>
		        <div class="dialog_Text">票房</div>
		      </div>

		      <!-- 票房显示图 -->
		      <div style="margin-top: 20px; width: 95%;display:flex;justify-content: center;flex-direction: row;">
		        <div style="display: flex;justify-content: center; width: 80%;height: 100px;border: 1px solid rgb(187, 187, 187);border-radius: 8px;background-color: rgba(232, 232, 232, 0.41);">
		          <div style="width: 90%;display: flex;flex-direction: row;justify-content: space-around;">
		            <div style="width:23%;display: flex;flex-direction: column;">
		              <div style="margin-top: 15px; color: rgba(248, 66, 68, 1);font-size: 30px;display: flex;justify-content: center;">{{movieSrc.ranking}}</div>
		              <div style="margin-top: 5px;color: rgba(91, 91, 91, 1);font-size: 18px;display: flex;justify-content: center;">昨日排名</div>
		            </div>

		            <div style="width:23%;display: flex;flex-direction: column;">
		              <div style="margin-top: 15px;color: rgba(248, 66, 68, 1);font-size: 30px;display: flex;justify-content: center;">{{movieSrc.firstWeekend}}</div>
		              <div style="margin-top: 7px;color: rgba(91, 91, 91, 1);font-size: 18px;display: flex;justify-content: center;">首周票房</div>
		            </div>

		            <div style="width:23%;display: flex;flex-direction: column;">
		              <div style="margin-top: 15px;color: rgba(248, 66, 68, 1);font-size: 30px;display: flex;justify-content: center;">{{movieSrc.allBoxoffice}}</div>
		              <div style="margin-top: 7px;color: rgba(91, 91, 91, 1);font-size: 18px;display: flex;justify-content: center;">累计票房</div>
		            </div>
		          </div>


		        </div>
		      </div>

		      <!-- 票房折线图 -->
		      <div style="margin-top: 20px; width: 95%;display:flex;justify-content: center;flex-direction: row;">
		        <div style="display: flex;justify-content: center; width: 80%;height: 300px;border: 1px solid rgb(187, 187, 187);border-radius: 8px;background-color: rgba(232, 232, 232, 0.41);">
		          <div id="pfZXT" style="width: 600px;height: 300px;"></div>
		        </div>
		      </div>
		      <!-- 评分 -->
		      <div class='dialog_IandT'>
		        <div class="dialog_Img1">
		          <img class="dialog_Img2" src="../pic/homePage/antOutline-pie-chart@1x.png" />
		        </div>
		        <div class="dialog_Text">评分</div>
		      </div>

		      <div style="margin-top: 20px; width: 100%;display: flex;flex-direction: row;justify-content: center;">
		        <div id="ndge_score" style="width: 400px;height: 300px;"></div>
		      </div>

		      <!-- 热门评论 -->
		      <div class='dialog_IandT'>
		        <div class="dialog_Img1">
		          <img class="dialog_Img2" src="../pic/homePage/fa-comment@1x.png" />
		        </div>
		        <div class="dialog_Text">热门评论</div>
		      </div>

		      <div style="margin-top: 20px; width: 100%;height: auto;display: flex;flex-direction: column;">
		        <div v-for="(src, index) in movieSrc.comments" :key="index" style="margin-left: 5%; width: 90%;display: flex;flex-direction: column;justify-content: center;">
		          <!-- 头像以及会员信息 -->
		          <div style="display: flex;flex-direction: row;height: 100px;align-items: center;">
		            <div style="width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;">
		              <img :src="movieSrc.comments[index].imgSrc" style="width: 80%;height: 80%;border-radius: 50%;" />
		            </div>
		            <div style="width: 30%; margin-left: 20px;height: 70%;display: flex;flex-direction: column;justify-content: space-around;">
		              <div style="font-size: 18px;color: black;">{{movieSrc.comments[index].name}}</div>
		              <div style="">
		                <el-rate v-model="movieSrc.comments[index].score" disabled show-score text-color="#ff9900">
		                </el-rate>
		              </div>
		            </div>
		            <!-- 点赞 -->
		            <div style="margin-left: 40%;;height: 50%;display: flex;flex-direction: column;justify-content:space-around;">
		              <div>
		                <img style="width: 30px;height: 30px;" src="../pic/homePage/ze-good-job-o.svg" />
		              </div>
		              <div style="font-size: 13px;color: #4e504c;">{{movieSrc.comments[index].num}}</div>
		            </div>
		          </div>
		          <!-- 评论内容 -->
		          <div style="margin-top: 10px; font-size: 16px;color: black;">{{movieSrc.comments[index].message}}</div>
		          <div style="display: flex;width: 100%;flex-direction: row;">
		            <hr width="100%" />
		          </div>
		        </div>
		        <!-- <div style="margin-top: 20px; width: 100%;display: flex;flex-direction: row;justify-content: center;">
		          <div style="color: #0011ff;">展示更多评论</div>
		        </div> -->
		      </div>


		      <!-- <img src="../pic/homePage/v2_quqd9s.jpg" /> -->
		    </div>

		  </div>
		</el-dialog>

	</div>
</template>

<script>
  import axios from 'axios';
  import * as echarts from "echarts";
  import $ from 'jquery'; //在需要使用的页面中
	export default {
		data() {
			return {
				url:'http://106.13.117.37:8000',
        dialogTableVisible:false,//弹框标志位
				fileName: '',
				restaurants:'',
				results:[],
        movieSrc: {
          title: '', //电影名称
          imgSrc: '', //电影封面图
          range: [], //电影类型
          direction: '', //地方
          length: '', //电影时长
          time: '', //上映时间
          boxoffice: '', //累计票房
          praise: '', //猫眼口碑得分
          score: '', //得分（五分制，如果是10分，除以2就行）
          personNum: '', //评分人数
          //电影简介
          introduction: '',
          ranking: '', //票房排名
          firstWeekend: '', //首周票房
          allBoxoffice: '', //累计票房
          boxofficeExchange: [820, 932, 901, 934, 1290, 1330, 1320], //最近一周的票房变化
          score_perstange: [
            { //评分占比，就是5分的占多少，4分的占多少
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
          ],
          actorSrc: [ //主要演职人员信息
            {
              name: '',
              imgSrc: '',
              roleName: ''
            },
            {
              name: '',
              imgSrc: '',
              roleName: ''
            },
           {
             name: '',
             imgSrc: '',
             roleName: ''
           },
            {
              name: '',
              imgSrc: '',
              roleName: ''
            },
            {
              name: '',
              imgSrc: '',
              roleName: ''
            },
            {
              name: '',
              imgSrc: '',
              roleName: ''
            },
          ],
          comments: [ //评论基本信息
            {
              name: '', //评论人名称
              imgSrc: '', //头像
              score: '', //评分
              num: '', //评论点赞人数
              message: '', //评论内容
            },
            {
              name: '', //评论人名称
              imgSrc: '', //头像
              score: '', //评分
              num: '', //评论点赞人数
              message: '', //评论内容
            },
            {
              name: '', //评论人名称
              imgSrc: '', //头像
              score: '', //评分
              num: '', //评论点赞人数
              message: '', //评论内容
            },
            {
              name: '', //评论人名称
              imgSrc: '', //头像
              score: '', //评分
              num: '', //评论点赞人数
              message: '', //评论内容
            },
            {
              name: '', //评论人名称
              imgSrc: '', //头像
              score: '', //评分
              num: '', //评论点赞人数
              message: '', //评论内容
            },
          ],

        },
			}
		},
		methods: {
			returnBtn(){
				this.$router.push('/homePage'); // 页面加载时跳转
			},
			querySearch(queryString, cb) {//实时搜索接口
        console.log(queryString+"搜索的内容")
				var restaurants = this.restaurants;
        //获取数据
        let vue = this;
        axios.get(vue.$data.url+'/api/v1/movie/movie_realtime_search?key='+queryString)
        	.then(response => {
        		if (response.data.msg == 'success') {
        			console.log("搜索的内容")
        			console.log(response)
              vue.$data.results = response.data.res
              console.log(vue.$data.results)
              cb(this.$data.results)
        		} else {
        			console.error("获取机器列表失败")
        		}
        	})
			},

			//搜索
			handleSelect(item) {
				console.log(item.value);
				console.log("进行搜索")
        this.get_movieSrc(item.value)
				this.$data.dialogTableVisible = true;
        this.protract()
			},

      get_movieSrc(movieName){
        console.log("获取该电影的所有信息")
        let vue = this;

        axios.get(vue.$data.url+'/api/v1/movie/detail_movie?name='+movieName)
        	.then(response => {
        		if (response.data.msg == 'success') {
        			console.log("获取该电影的所有信息")
        			console.log(response)
              vue.$data.movieSrc.title = response.data.res.title
              vue.$data.movieSrc.imgSrc = response.data.res.imgSrc
              vue.$data.movieSrc.length = response.data.res.length
              vue.$data.movieSrc.time = response.data.res.time
              vue.$data.movieSrc.praise = '8.6'
              //累计票房

              let x1 = Math.ceil(response.data.res.allBoxoffice)/10000
              var ss1 = x1.toString()
              if(ss1.length>=6){
                vue.$data.movieSrc.allBoxoffice = ss1.substring(0,6)
              }else{
                vue.$data.movieSrc.allBoxoffice = ss1.substring
              }

              vue.$data.movieSrc.score = response.data.res.score/2
              vue.$data.movieSrc.personNum = response.data.res.personNum
              vue.$data.movieSrc.introduction = response.data.res.introduction
              vue.$data.movieSrc.direction = response.data.res.direction
              //vue.$data.movieSrc.firstWeekend = response.data.res.firstWeekend
              let x2 = Math.ceil(response.data.res.firstWeekend)/10000
              var ss2 = x2.toString()
              vue.$data.movieSrc.firstWeekend = ss2.substring(0,6)
              vue.$data.movieSrc.ranking = response.data.res.ranking
              for(let i = 0;i < response.data.res.actorSrc.length;i++){
                vue.$data.movieSrc.actorSrc[i].name = response.data.res.actorSrc[i].movie_star_name.replace(/\s[\x00-\xff]*/g,'')
                vue.$data.movieSrc.actorSrc[i].imgSrc = response.data.res.actorSrc[i].movie_star_img
                vue.$data.movieSrc.actorSrc[i].roleName = response.data.res.actorSrc[i].movie_star_role
              }
              for(let i = 0;i < response.data.res.comments.length;i++){
                vue.$data.movieSrc.comments[i].name = response.data.res.comments[i].movie_comment_person_name
                vue.$data.movieSrc.comments[i].score = response.data.res.comments[i].movie_comment_person_score/10
                vue.$data.movieSrc.comments[i].imgSrc = response.data.res.comments[i].movie_comment_person_img
                vue.$data.movieSrc.comments[i].num = response.data.res.comments[i].movie_comment_thumb
                vue.$data.movieSrc.comments[i].message = response.data.res.comments[i].movie_comment
              }
              for(let i = 0;i < response.data.res.score_perstange.length;i++){
                vue.$data.movieSrc.score_perstange[i].name = response.data.res.score_perstange[i].name
                vue.$data.movieSrc.score_perstange[i].value = response.data.res.score_perstange[i].value.match(/(\S*)%/)[1]
                console.log(response.data.res.score_perstange[i].value.match(/(\S*)%/)[1])
              }
              console.log(vue.$data.movieSrc.score_perstange)
              vue.ndge_Score(vue.$data.movieSrc.score_perstange)
              vue.$data.movieSrc.range = []
              for(let i = 0;i < response.data.res.range.length;i++){
                vue.$data.movieSrc.range.push(response.data.res.range[i])
              }
              this.pfzxt(vue.$data.movieSrc.boxofficeExchange)

        		} else {
        			console.error("获取机器列表失败")
        		}
        	})
      },




      close_Dialog(){
        this.$data.dialogTableVisible = false;
      },

      protract() { //加载框中的图表绘制
        this.pfzxt(this.$data.movieSrc.boxofficeExchange)
        this.ndge_Score(this.$data.movieSrc.score_perstange)
      },
      pfzxt(data) {
        echarts.init(document.getElementById("pfZXT")).setOption({
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: data,
            type: 'line',
            smooth: true
          }]
        })
      },
      ndge_Score(data) {
        echarts.init(document.getElementById("ndge_score")).setOption({
          legend: {
            top: 'bottom'
          },
          series: [{
            name: '面积模式',
            type: 'pie',
            radius: [10, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: data,
          }]
        })
      },
		},
	}
</script>

<style>
	.notChange {
	  position: fixed;
	  top: 0px;
	  left: 0px;
	}
  .dialog_IandT {
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    height: 40px;
    margin-top: 20px;
  }

  .dialog_Img1 {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dialog_Img2 {
    width: 90%;
    height: 90%;
  }

  .dialog_Text {
    display: flex;
    align-items: center;
    font-family: PingFangSC;
    font-size: 28px;
    color: rgb(19, 19, 19);
    font-style: normal;
    margin-left: 15px;
    font-weight: bold;
  }

</style>
